<template>
  <div class="peolist">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="站点名称:">
          <el-select v-model="formInline.regionName" clearable>
            <el-option v-for="item in regionNameArry" :key="item.id" :label="item.regionName" :value="item.regionName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用单位名称:">
          <el-input v-model="formInline.useOrgName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="维保类型:">
          <el-select v-model="formInline.user" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
          <el-button @click="onexport" size="small">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: right">
          <!-- <p>任务数量:<span style="color:red;margin:0 5px">1</span> 使用单位数量:<span style="color:red;margin:0 5px">0</span></p> -->
          <p><el-button size="small" type="primary" @click="addClick">分配</el-button><el-button size="small" type="danger" @click="deleteClick">解绑</el-button>
          </p>

        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="useOrgName" label="使用单位名称" width="320">
        </el-table-column>
        <el-table-column prop="eleCode" label="设备注册代码" width="200">
        </el-table-column>
        <!-- <el-table-column prop="date" label="维保类型">
        </el-table-column> -->
        <el-table-column prop="regionName" label="站点名称">
        </el-table-column>
        <el-table-column prop="regionWorker" label="站内人员" width="100">
        </el-table-column>
        <el-table-column prop="eleUseCommunity" label="详细地址" width="320">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
    <el-dialog title="分配任务" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-card>
        <el-form :model="form" :inline="true" :rules="rules" ref="form">
          <el-form-item label="站点名称" label-width="100px">
            <el-input v-model="form.regionName" autocomplete="off" size='small' disabled></el-input>
          </el-form-item>
          <el-form-item label="设置维保起始日期" label-width="100px" prop="maintStartDate">
            <el-date-picker v-model="form.maintStartDate" type="date" placeholder="选择日期" size='small' :picker-options="pickerOptions" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="排版法" label-width="100px" prop="classes">
            <el-input-number v-model="form.classes" :min="1" :max="14" label="描述文字" size='small'></el-input-number>
          </el-form-item>
          <el-form-item label="选择维保模板" label-width="100px" prop="maintTemplateId">
            <el-select v-model="form.maintTemplateId" placeholder="请选择">
              <el-option v-for="item in temoptions" :key="item.templateId" :label="item.templateName" :value="item.templateId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top:15px">
        <el-table :data="temData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" highlight-current-row @current-change="handleCurrent">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="姓名" prop="realName">
          </el-table-column>
          <el-table-column prop="eleTotal" label="已承保电梯数">
          </el-table-column>
          <el-table-column prop="phonenumber" label="联系电话">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page.sync="pagination1.pageNum"
          :page-size="pagination1.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination1.pageTotal"
          align='right'>
        </el-pagination>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="onAdd('form')" :loading='loading'>添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getselectEleWorkerBindPage, selectMaintRegionList, getselectEleWorkerBindWorkerPage, geselectMaintTemplateList, getsaveEleWorkerBindWorker, getdeleteEleWorkerBindWorker } from '@/api/scheme'
export default {
  data () {
    return {
      loading:false,
      rules: {
        maintStartDate: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        classes: [
          { required: true, message: '请输入排版', trigger: 'change' }
        ],
        maintTemplateId: [
          { required: true, message: '请选择模板', trigger: 'change' }
        ],
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
      dialogVisible: false,
      formLabelWidth: '140px',
      options: [],
      activeName: 'first',
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      pagination1: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      temoptions: [],
      formInline: {
        regionName: ''
      },
      temData: [],
      regionNameArry: [],
      tableData: [],
      form: {
        classes:'14'
      },
      multipleSelection: [],
      currentRow: null
    }
  },
  mounted () {
    this.getregionNameArry()
  },
  methods: {
    onAdd (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.currentRow) {
            this.loading = true
            let query = this.multipleSelection.map((item) => {
              return item.eleCode
            })
            const params = {
              eleCodes: query,
              regionId: this.multipleSelection[0].regionId,
              classes: this.form.classes,
              maintStartDate: this.form.maintStartDate,
              maintTemplateId: this.form.maintTemplateId,
              regionId: this.form.regionId,
              workerId: this.currentRow.workerId
            }
            getsaveEleWorkerBindWorker(params).then(res => {
              if (res.data.code == '200') {
                this.loading = false
                this.handleClose()
                this.gettableData()
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                })
              }
            })

          } else {
            this.$message({
              message: '请选择要绑定的人员',
              type: 'warning'
            })
          }

        } else {
          return false
        }
      })

    },
    //获取站点下拉框
    getregionNameArry () {
      const params = {
        pageNum: 1,
        pageSize: 0,
      }
      selectMaintRegionList(params).then(res => {
        if (res.data.code == 200) {
          this.regionNameArry = res.data.data.list
          this.formInline.regionName = this.regionNameArry[0].regionName
          this.gettableData()
        }
      })
    },
    // 获取表格数据
    gettableData () {
      const query = {
        useOrgName: this.formInline.useOrgName,
        regionName: this.formInline.regionName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      getselectEleWorkerBindPage(query).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    // // 关闭弹框
    handleClose () {
      this.$refs.form.resetFields()
      this.form = {
        classes:'14'
      },
      this.dialogVisible = false
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
    handleSizeChange1 (val) {
      this.pagination1.pageNum = 1
      this.pagination1.pageSize = val
    },
    handleCurrentChange1 (val) {
      this.pagination1.pageNum = val
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onexport () {
      console.log('onexport!')
    },
    //分配按钮
    addClick () {
      if (this.multipleSelection.length > 0) {
        this.dialogVisible = true
        const query = {
          pageNum: this.pagination1.pageNum,
          pageSize: this.pagination1.pageSize,
        }
        getselectEleWorkerBindWorkerPage(query).then(res => {
          if (res.data.code == 200) {
            this.temData = res.data.data.list
            this.pagination1.pageTotal = res.data.data.total
            this.form.regionName = this.formInline.regionName
          }
        })
        const query1 = {
          pageNum: 1,
          pageSize: 0,
        }
        geselectMaintTemplateList(query1).then(res => {
          if (res.data.code == 200) {
            this.temoptions = res.data.data.list
          }
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }

    },
    handleCurrent (val) {
      console.log(val)
      this.currentRow = val
    },
    //解绑按钮
    deleteClick () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('此操作将解绑, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.eleCode
          })
          const params = {
            eleCodes: query
          }
          getdeleteEleWorkerBindWorker(params).then(res => {
            if (res.data.code == 200) {
              this.gettableData()
            }
          })
          this.$message({
            type: 'success',
            message: '解绑成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解绑'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }
    }
  }
}

</script>
<style lang='less' scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.el-pagination {
  margin-top: 2vh;
  text-align: right;
}

::v-deep .el-form-item__label {
  font-weight: bold;
}
.peolist {
  .clearfix {
    font-weight: bold;
  }
}
::-webkit-scrollbar {
  width: 0px;
}
</style>
